<template>
    <div class="score">
        <!-- <div class="txt">AI检测总分：</div> -->
        <div class="rule">
            <div class="rule-score">
                <div class="rule-bg" :style="{left:totalScore*100/24+'%'}">
                    <div class="score-num" :style="{color:color}">{{totalScore}}分</div>
                    <div class="rule-color" :style="{background:color}"></div>
                </div>
            </div>
            <img class="rule-img"  src="@/assets/images/rule.png"/>
            <div class="rule-unit">
                <div class="unit0">无</div>
                <div class="unit1">轻微</div>
                <div class="unit2">中度</div>
                <div class="unit3">严重</div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
props: {
    totalScore: {
    type: Number,
    default:13.0
  },
},
data() {
  return {
    color: 'rgb(195, 156, 228)',
  }
},
computed: {
 
},
mounted() {
    console.log(this.totalScore)
    this.color = this.pickHex([195, 156, 228], [132, 141, 228], this.totalScore)
},
methods: {

    pickHex(color1, color2, weight) {
				var w2 = weight / 24;
				var w1 = 1 - w2;
				var rgb =
					`rgb(${Math.round(color1[0] * w1 + color2[0] * w2)},${Math.round(color1[1] * w1 + color2[1] * w2)},${Math.round(color1[2] * w1 + color2[2] * w2)})`;
				return rgb;
			},

}
}
</script>

<style lang="scss" scoped>
.score{
    color: #999999;
    font-size:14px;
    line-height:30px;
    display: flex;
    flex-wrap: wrap;
    //justify-content: center;
    .txt{
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .rule{
        position: relative;
        width:250px; //300
        margin:0 auto;
        &-score{
            position: absolute;
            width:218px;
            left:16px;
            height:30px;
            font-size:16px;
            font-weight: bold;
            line-height:30px;
            .rule-bg{
                position: absolute;
               // transform: translate(-60%);
                //margin-left:-40px;
                text-align: center;
                //padding-left:4px;
                width:80px;
                .score-num{
                    transform: translate(-50%);
                }
                .rule-color{
                    width: 12px;
                    height: 12px;
                    border-radius: 12px;
                    margin-left:-6px;
                   
                }
            }
        }
        &-img{
            width: 100%;
            margin-top: 45px;
        }
        &-unit{
            position: absolute;
                bottom: -20px;
                width:242px;
                left: 8px;
                display: flex;
                justify-content: space-between;
                font-size:18px;
                .unit0{
                    color: rgb(195, 156, 228);
                }
                .unit1{
                    color: rgb(195, 156, 228);
                }
                .unit2{
                    color: rgb(132, 141, 228);
                }
                .unit3{
                    color: rgb(132, 141, 228);
                }
        }
    }
}

@media screen and (max-width:550px) {
    .score{
    color: #999999;
    font-size:14px;
    line-height:30px;
    display: flex;
    flex-wrap: wrap;
    //justify-content: center;
    .txt{
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .rule{
        position: relative;
        width:220px; //300
        margin:0 auto;
        &-score{
            position: absolute;
            width:188px;
            left:16px;
            height:20px;
            font-size:14px;
            font-weight: bold;
            line-height:20px;
            .rule-bg{
                position: absolute;
               // transform: translate(-60%);
                //margin-left:-40px;
                text-align: center;
                //padding-left:4px;
                width:80px;
                .score-num{
                    transform: translate(-50%);
                }
                .rule-color{
                    width: 8px;
                    height: 8px;
                    border-radius: 8px;
                    margin-left:-4px;
                   
                }
            }
        }
        &-img{
            width: 100%;
            margin-top: 30px;
        }
        &-unit{
            position: absolute;
                bottom: -14px;
                width:212px;
                left: 8px;
                display: flex;
                justify-content: space-between;
                font-size:14px;
               
        }
    }
}


}

@media screen and (max-width:390px) {
    .score{
    color: #999999;
    font-size:14px;
    line-height:30px;
    display: flex;
    flex-wrap: wrap;
    //justify-content: center;
    .txt{
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .rule{
        position: relative;
        width:220px; //300
        margin:0 auto;
        &-score{
            position: absolute;
            width:188px;
            left:16px;
            height:20px;
            font-size:14px;
            font-weight: bold;
            line-height:20px;
            .rule-bg{
                position: absolute;
               // transform: translate(-60%);
                //margin-left:-40px;
                text-align: center;
                //padding-left:4px;
                width:80px;
                .score-num{
                    transform: translate(-50%);
                }
                .rule-color{
                    width: 8px;
                    height: 8px;
                    border-radius: 8px;
                    margin-left:-4px;
                   
                }
            }
        }
        &-img{
            width: 100%;
            margin-top: 30px;
        }
        &-unit{
            position: absolute;
                bottom: -14px;
                width:212px;
                left: 8px;
                display: flex;
                justify-content: space-between;
                font-size:14px;
               
        }
    }
}

}
</style>

